import React from 'react';
import PropTypes from 'prop-types'

const PriceList = ({items, onModifyItem, onDeleteItem}) => {
    return (
        <ul className="list-group">
            {
                items.map((item) => (
                    <li
                        className="d-flex justify-content-between align-items-center list-group-item list-group-item-action"
                        style={{height: '40px'}}
                        key={item.id}
                    >
                        <span className="col-md-1">
                            <svg
                                className="icon rounded-circle"
                                aria-hidden="true"

                                style={{backgroundColor: '#007bff', padding: '5px', fill: '#fff', fontSize: '30px'}}
                            >
                                <use xlinkHref={item.category.icon}></use>
                            </svg>
                        </span>
                        <span className="col-md-5">{item.title}</span>
                        <span className="col-md-2 font-weight-bold">
                            {(item.category.type === "income") ? "+" : "-"}
                            {item.price}元
                        </span>
                        <span className="col-md-2">{item.date}</span>
                        <span
                            className="col-md-1 btn"
                            onClick={() => {
                                onModifyItem(item)
                            }}
                        >
                            <svg
                                className="icon rounded-circle"
                                aria-hidden="true"

                                style={{backgroundColor: '#28a745', padding: '5px', fill: '#fff', fontSize: '30px'}}
                            >
                                <use xlinkHref="#icon-bianji1"/>
                            </svg>
                        </span>
                        <span
                            className="col-md-1 btn"
                            onClick={() => {
                                onDeleteItem(item)
                            }}
                        >
                            <svg
                                className="icon rounded-circle"
                                aria-hidden="true"

                                style={{backgroundColor: '#dc3545', padding: '5px', fill: '#fff', fontSize: '30px'}}
                            >
                                <use xlinkHref="#icon-shanchu"></use>
                            </svg>
                        </span>
                    </li>
                ))
            }
        </ul>
    )
}

PriceList.propTypes = {
    items: PropTypes.array.isRequired,
    onModifyItem: PropTypes.func.isRequired,
    onDeleteItem: PropTypes.func.isRequired,
}

export default PriceList;